<template>
  <div class="report">
    <div class="top">
      <span
        v-for="item in contents"
        :key="item.id"
        :class="activeItem.name === item.name ? 'active' : ''"
        @click="clickActive(item)"
        >{{ item.name }}</span
      >
    </div>
    <el-divider></el-divider>
    <component :is="activeItem.page" :tableData="tableData"></component>
  </div>
</template>
<script>
import MyTodo from "./report/MyTodo.vue";
import MyApply from "./report/MyApply.vue";
import haveDo from "./report/haveDo.vue";
import MyNotify from "./report/MyNotify.vue";
import predictTodo from "./report/predictTodo.vue";
import drafts from "./report/drafts.vue";
export default {
  name: "processCenter",
  components: { MyTodo, MyApply, haveDo, MyNotify, predictTodo, drafts },
  data() {
    return {
      activeItem: {
        page: "MyTodo",
        name: this.$t("我的待办", "processCenter.myTodo"),
      },
      contents: [
        {
          page: "MyTodo",
          name: this.$t("我的待办", "processCenter.myTodo"),
        },
        {
          page: "MyApply",
          name: this.$t("我的申请", "processCenter.myApply"),
        },
        {
          page: "haveDo",
          name: this.$t("已办", "processCenter.done"),
        },
        {
          page: "MyNotify",
          name: this.$t("我的知会", "processCenter.myNotice"),
        },
        {
          page: "predictTodo",
          name: this.$t("预计待办", "processCenter.willDo"),
        },
        {
          page: "drafts",
          name: this.$t("草稿箱", "processCenter.draft"),
        },
      ],
      tableData: [],
    };
  },
  mounted() {
    if (this.$route.params.id) {
      this.clickActive(this.contents[this.$route.params.id]);
    }
  },
  methods: {
    clickActive(item) {
      this.activeItem = item;
    },
    clickActive(item) {
      this.activeItem = item;
      window.sessionStorage.setItem("activeReport", JSON.stringify(item));
    },
  },
  created() {
    if (this.$route.params.id) {
      this.activeItem = this.contents[this.$route.params.id];
    }
    let haveActive = window.sessionStorage.getItem("activeReport");
    if (haveActive) {
      this.activeItem = JSON.parse(haveActive);
    }
  },
};
</script>
<style lang="less" scoped>
.report {
  width: 100%;
  background-color: #fff;
  padding: 24px;
  .top {
    line-height: 36px;
    height: 36px;
    span {
      padding: 0 16px;
      color: rgb(100, 106, 115);
      font-size: 16px;
      cursor: pointer;
    }
    .active {
      color: rgb(34, 69, 133);
      font-weight: 600;
    }
  }
}
.report-main {
  height: calc(100vh - 163px);
}
:deep(.el-table) {
 height: calc(100vh - 260px);
}
/deep/ .el-pagination {
  text-align: right;
}
.el-divider--horizontal {
  margin: 0;
}
</style>
